<!-- 商品-->

<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="商品信息"
    width="450px"
    @close="emits('closeDialog')"
  >
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" :label-width="formLabelWidth">
      <el-form-item label="名字" prop="name">
        <el-input v-model="dialogForm.name" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dialogForm.description" />
      </el-form-item>
      <el-form-item label="数量" prop="amount">
        <el-input v-model="dialogForm.amount" />
      </el-form-item>
      <el-form-item label="ios价格" prop="ios_price">
        <el-input v-model="dialogForm.ios_price" />
      </el-form-item>

      <el-form-item label="android价格" prop="android_price">
        <el-input v-model="dialogForm.android_price" />
      </el-form-item>

      <el-form-item label="APP版本" prop="app_mark">
        <el-select v-model="dialogForm.app_mark" placeholder="APP版本">
          <el-option label="norm" value="norm"></el-option>
          <el-option label="cash" value="cash"></el-option>
          <!-- <el-option label="all" value="all"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="谷歌市场商品id" prop="goods_id">
        <el-input v-model="dialogForm.goods_id" />
      </el-form-item>
      <el-form-item label="基准定价价格" prop="price">
        <el-input v-model="dialogForm.price" />
      </el-form-item>
      <el-form-item label="展示价格" prop="show_price">
        <el-input v-model="dialogForm.show_price" />
      </el-form-item>
      <el-form-item label="基准币种" prop="currency">
        <el-input v-model="dialogForm.currency" />
      </el-form-item>
      <el-form-item label="基准币种符号" prop="currency_symbol">
        <el-input v-model="dialogForm.currency_symbol" />
      </el-form-item>
      <el-form-item label="展示法币" prop="show_currency">
        <el-input v-model="dialogForm.show_currency" />
      </el-form-item>
      <el-form-item label="展示法币符号" prop="show_symbol">
        <el-input v-model="dialogForm.show_symbol" />
      </el-form-item>
      <el-form-item label="排序" prop="rank">
        <el-input v-model="dialogForm.rank" />
      </el-form-item>

      <el-form-item label="id" style="display: none">
        <el-input v-model="dialogForm.id" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      name: "",
      description: "",
      amount: "",
      ios_price: "",
      android_price: "",
      app_mark: "",
      android_price: "android价格",
      goods_id: "谷歌市场商品id",
      price: "基准定价价格",
      show_price: "展示价格",
      currency: "基准币种",
      currency_symbol: "基准币种符号",
      show_currency: "展示法币",
      show_symbol: "展示法币符号",
      rank: "排序"
    }
  },
  btnLoading: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "120px";
// 校验
const rules = {
  name: [{ required: true, message: "请输入名字", trigger: "blur" }],
  description: [{ required: true, message: "请输入描述", trigger: "blur" }],
  amount: [{ required: true, message: "请输入钻石数量", trigger: "blur" }],
  ios_price: [{ required: true, message: "请输入ios价格", trigger: "blur" }],
  android_price: [
    { required: true, message: "请输入iandroid价格", trigger: "blur" }
  ],
  app_mark: [{ required: true, message: "请选择APP版本", trigger: "blur" }]
};

// 提交
const submit = dialogForm => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        emits("submitForm", dialogForm);
      } catch (error) {
        console.log(error);
      }
    })
    .catch(error => {
      console.log(error);
    });
};
</script>
